<template>
  <left-toggle-layout title="监测站点" width="290px">
    <template #title>
      <span>监测站点</span>
      <split-vline class="margin-left-15 margin-right-15" />
      <add-button class="margin-left-8" :on-click="handleAddClick" />
      <!--<edit-button/>-->
    </template>
    <template #left>
      <left-site-list
        ref="LeftSiteList1"
        v-bind="$props"
        :on-click-row="handleClickRow"
        :allow-delete="true"
        is-site
      ></left-site-list>
    </template>
    <div class="layout-flex-avg vertical" ref="content1">
      <div class="layout-flex-avg-center" style="height:390px;flex: none;">
        <card-panel>
          <!--基本信息-->
          <info-show v-bind="$props" :query-obj="currentRow" :on-edit-click="handleEditClick"></info-show>
        </card-panel>
      </div>
      <div class="layout-flex-avg-center">
        <card-panel>
          <!--<h2>{{ dataTableHeight }}</h2>-->
          <!--监测设备-->
          <equip-show
            v-bind="$props"
            :data-table-height="dataTableHeight"
            :point-code="currentRow.pointCode"
          ></equip-show>
        </card-panel>
      </div>
    </div>
  </left-toggle-layout>
</template>

<script>
import InfoShow from '@/views/theApp/site/components/InfoShow'
import EquipShow from '@/views/theApp/site/components/EquipShow'
import LeftSiteList from '@/views/theApp/common/LeftSiteList'

export default {
  name: 'index',
  props: {
    // 站点编码
    monitorType: {
      type: String,
      default: 'airtype'
    }
  },
  components: {
    LeftSiteList,
    InfoShow,
    EquipShow
  },
  data() {
    return {
      currentRow: {
        pointCode: ''
      },
      dataTableHeight: 450
    }
  },
  methods: {
    // 点击行
    handleClickRow(row) {
      this.currentRow = row
    },
    // 新增
    handleAddClick() {
      this.handleEditClick(null)
    },
    // 编辑
    handleEditClick(row) {
      this.$refs.LeftSiteList1.editInput(row)
    },
    handleResize() {
      const height = this.$refs.content1.clientHeight
      this.dataTableHeight = height - 390 - 160
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.handleResize()
    })
  },
  beforeMount() {
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/pages/index.scss';
</style>
